import React from "react";
// import { Link, Switch, Route, withRouter } from "react-router-dom";
import {
  Link,
  Switch,
  Route,
  useHistory,
  useLocation,
  useParams,
  useRouteMatch,
} from "react-router-dom";

// todo hooks只能给函数组件用
// todo hooks是16.8版本出来的
// todo 增强函数组件的功能, 不会使组件树变深
// todo 所有的hooks都是函数，都是use开头的
// todo 所有的hooks都要写在函数组件的顶层

const Home = () => {
  const history = useHistory();
  const location = useLocation();
  const params = useParams();
  const match = useRouteMatch();

  const fn = () => {
    console.log(location);
    // history.push("/about");
  };

  return (
    <div>
      这是home组件 - <button onClick={fn}>btn</button>
    </div>
  );
};
const About = () => {
  return <div>这是about组件</div>;
};
const Mine = () => {
  return <div>这是Mine组件</div>;
};

const App = () => {
  return (
    <>
      <h2>react-router-hooks</h2>
      <ul>
        <li>
          <Link to="/home">home</Link>
        </li>
        <li>
          <Link to="/about">about</Link>
        </li>
        <li>
          <Link to="/mine">mine</Link>
        </li>
      </ul>

      <hr />

      <Switch>
        <Route path="/home">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/mine">
          <Mine />
        </Route>
      </Switch>
    </>
  );
};

export default App;
